<template>
	<view class="padding-sm pos-r">
		<use-navbar title="常见问题"></use-navbar>

		<scroll-view scroll-x class="ws-np">
			<view class="dflex">
				<block v-for="(item, idx) in typeDatas" :key="idx">
					<view class="pos-r padding-tb-sm margin-right-xs padding-lr-sm line-height-1 tac"
						:class="{ active: activeId === idx }" @click="onQuery(item, idx)">
						{{item}}
					</view>
				</block>
			</view>
		</scroll-view>

		<view v-if="datas && datas.length > 0" class="bg-main padding padding-bottom-sm border-radius margin-top-sm">
			<view class="dflex-b border-line padding-bottom-sm">
				<view class="fwbd fs-30">猜你想问</view>
				<view class="dflex ft-dark">
					<view class="fs-xs"></view>
					<view class="iconfont iconjiantou-01 fs-xs margin-left-xs"></view>
				</view>
			</view>
			<view class="dflex-b padding-tb-sm" v-for="(item, idx) in faqDatas" :key="idx" @click="toContent(item)">
				<view class="">{{item.title}}</view>
				<view class="iconfont iconjiantou-01 fs-xs margin-left-xs ft-dark"></view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
		<view class="pos-f padding-tb-16 bg-main pos-b-full">
			<button class="dflex-c bg-main w-full" open-type="contact">
				<view class="iconfont iconkefu-01"></view>
				<view class="margin-left-xs fs-xs">联系官方客服</view>
			</button>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-ALIPAY -->
		<!-- 需自行配置支付宝小程序客服参数 -->
		<view class="fixed-top dflex-c dflex-flow-c">
			<contact-button tnt-inst-id="0Xu_1zzW" scene="SCE00225463" size="50" color="#bbb" />
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		provide,
		onMounted,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import {
		storeToRefs
	} from 'pinia';
	import {
		useUserStore
	} from '@/store'
	
	const {
		ctx,
		proxy
	} = getCurrentInstance();
	console.log("ctx", ctx);
	
	let UserStore = useUserStore()
	const type = ref('')
	const activeId = ref(0)
	const typeDatas = ref([])
	const faqDatas = ref([])
	const datas = ref([])	
	
	
	// onLoad 接受 A 页面传递的参数
	onLoad((option) => {
		console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
		type.value = option.type;
		loadData();
	});
	
	onShow(() => {
		console.log("B 页面 onShow");
	});
	
	const loadData=() =>{
	
	}
	const toContent=(item)=> {
		const content =
			`<div class="__rich_text">${item.content.replace(/<h1/gi, '<h1 class="use-p"').replace(/<h3/gi, '<h3 class="use-p"').replace(/<p/gi, '<p class="use-p"')}</div>`;
	
		uni.setStorage({
			key: '__rich_text',
			data: content,
			success() {
				uni.navigateTo({
					url: '/pages/content/rich-text'
				})
			}
		})
	}
	const onQuery=(item, idx)=> {
		this.activeId = idx;
	
		this.faqDatas = this.datas.filter(x => x.type == item || item == '全部');
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;

		button::after {
			border: none
		}

		.active {
			color: #ff6a6c;
			font-weight: bold;
			font-size: 34rpx;
		}

	}
</style>